import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import cssModules from 'react-css-modules';
import {Button, List, Row, Icon, Form, Select, Input} from 'antd';
import {PageHeader} from 'ant-design-pro';
import DataTable from './DataTable';
import Toolbar from '../../component/Toolbar';
import CommonModal from '../../component/CommonModal';
import NewUsersContent from './NewUsersContent.js';
import UploadPhoto from './UploadPhotos.js';

import styles from './style.less';

@inject('CardUsedStore', 'CardUsedLossStore', 'GlobalStore')
@observer
@cssModules(styles)
class SearchList extends Component {
  constructor(props) {
    super(props);

    this.store = this.props.CardUsedStore;
  }

  async componentWillMount() {
    const {location, match, history} = this.props;

    await this.store.onWillMount(location, match, history);
    await this.props.GlobalStore.setCurrentPage(this);
  }
  reset() {
    const {onWillMount, reset} = this.props.CardUsedStore;
    onWillMount();
    reset();
  }

  render() {
    const {
      tableData,
      onDelete,
      loading,
      changeCardType,
      changeHousehold,
      filter_cardType,
      filter_household,
      search,
    } = this.store;
    const {lossOk} = this.props.CardUsedLossStore;
    let toolbar = [
      {
        type: 'button',
        pos: 'left',
        name: '删除',
        onConfirm: item => {
          onDelete(item);
        },
        title: '确定要删除所选卡号吗?',
        className: styles['delete'],
        icon: <i className={'iconfont iconshanchu1'} />,
      },
      {
        type: 'select',
        pos: 'right',
        className: styles['card-type'],
        defaultValue: filter_cardType,
        placeholder: '请选择卡片类型',
        onChange: value => {
          changeCardType(value);
        },
        children: [
          {name: '全部', value: undefined},
          {name: '业主卡', value: 1},
          {name: '工作卡', value: 2},
        ],
      },
      {
        type: 'input',
        pos: 'right',
        defaultValue: filter_household,
        className: styles['household-input'],
        placeholder: '请熟肉所属户室/使用者查询',
        onChange: e => {
          changeHousehold(e.target.value);
        },
      },
      {
        type: 'button',
        pos: 'right',
        name: '查询',
        bg: 'blue',
        className: styles['household-search'],
        handleClick: () => {
          search();
        },
      },
    ];
    return (
      <div>
        <div styleName={'container'}>
          <Toolbar modules={toolbar} className={styles['toolbar-wrap']} />
          <div>
            <DataTable data={tableData} />
          </div>
          <CommonModal
            title={'卡片挂失'}
            width={645}
            type={'loss'}
            onOk={lossOk}>
            <NewUsersContent />
          </CommonModal>
        </div>
      </div>
    );
  }
}
export default SearchList;
